<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
    <!--1. 准备一个容器-->
    <div id="app">
        <h3>Vue入门</h3>
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>

        <h3>标签属性绑定</h3>
        <a :href="obj.url" :title="obj.title">蜗牛学苑</a>

        <h3>条件判断</h3>
        <ul>
            <li v-if="score>=80">优秀</li>
            <li v-else-if="score>=60">良好</li>
            <li v-else>一般</li>
        </ul>
    </div>

    <script>
        // 2. 创建一个Vue对象
        new Vue({
            // 指定vue对象为哪个容器服务
            el:"#app",
            data:{  // 容器中存储的数据在这里定义
                name: 'jack',
                age: 20,
                score:80,
                obj:{
                    url:'http://www.woniuxy.com',
                    title:'欢迎你来到这里!'
                }
            }
        })
    </script>
</body>
</html>